一起学可视化：基础入门（canvas，svg）

随着前端越来越卷，如果只懂得前端三件套、Vue、React，未来在职场的竞争力可能会比较弱。随着5G时代的到来以及浏览器内核的不断优化和增强，前端未来在数据可视化、AR、AI等领域会比较香。本着只要卷不死就往死里卷的原则，从本篇开始就开始系统学习可视化，这个系列将分为以下几部分进行：

如上图所示，前端领域可视化的技术非常多，每个技术都够你折腾一年半载的。Skia，OpenGL这种底层的我们前端cv工程师基本接触不到，如果你从事的是web网页开发（比如我），平时开发可能就会用到canvas绘制个图片，svg做个动图，展示类项目可能会用到ECharts图表。

入门一个技术，前期最重要是快！先学会使用，所以本文开始，我将通过3篇文章光速过入门一下前置基础知识（canvas、svg、webGL、ECharts）。我是文章作者，也是学习者，文中如有不对还请指出。文章只涉及各个技能点的基本使用，想深度学习的同学可自行网上冲浪🚤。

ok,本篇开始学习canvas和svg

canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。

总结：

由上面的的入门案例可以看到我们需要调用canvas提供的API绘制完之后才能在浏览器看到，所以想要实现动画我们需要借助window对象提供的3个setInterval、setTimeout、requestAnimationFrame API配合canvas API提供的几何变换（translate（平移）、rotate（旋转）、scale（缩放）、transform（可实现各种变换））和状态来实现动画。ok，下面我们用requestAnimationFrame实现一个小时候家里彩色电视机的简单小球屏保动画。

ok，再写一个经常在博客网站看到的粒子动画背景。之前看到类似的粒子动画就很好奇是如何实现的，今天就现学现卖画一个。说一下大概思路：

通过canvas的fillRect()方法创建一定数量的粒子放到dots[]中

遍历粒子，并使粒子做随机运动

判断两个粒子之间的距离，当距离小于某个数值时将两个粒子相连

添加鼠标事件进行交互

tip：传送门--> Canvas 教程 - Web API 接口参考 | MDN (mozilla.org)

SVG是一种基于XML的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。

语法：

需要注意的点：

下面就直接上代码实现上面canvas一样的功能。

上面的入门案例中path标签是所有图形中最复杂的，但他也是最强大的。可以绘制圆形、椭圆、矩形、线条、折线、多边形、贝塞尔曲线等。如果你刚接触svg可能会一脸懵，现在对path做如下拓展：

path标签的图形形状通过属性d（命令+参数）来定义，有如下10个命令：

M = Move to（把画笔移动到某个点，如果有多个M命令则表示新路径的开始）

L = Line to（与之前的点连成一条线）

H = Horizontal Line to（从之前的点绘制一条水平的直线，H命令可以等价于y值和之前点相同的L命令）

V = Vertical Line to（从之前的点绘制一条垂直的直线，V命令可以等价于x值和之前点相同的L命令）

Q = Quadratic Bezier Curve to（绘制一条二次贝塞尔曲线）

语法：Q x1 y1, x y 或者 q x1 y1, x y

参数：x、y为终点位置，x1、y1为控制点。

T = Smooth Quadratic Bezier Curve to（延长二次贝塞尔曲线的简化命令，T命令的的前面必须有一个Q命令或者其他的T命令。如果T命令单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线）

语法：T x y 或者 t x y

参数：x、y为终点位置。

C = Curve to（绘制一条三次贝塞尔曲线）

语法：C x1 y1, x2 y2, x y 或者 c x1 y1, x2 y2, x y

参数：x、y为终点位置，x1、y1为曲线起始点的控制点，x2、y2为曲线终止的控制点。

S = Smooth Curve to（三次贝塞尔曲线的S命令和二次贝塞尔曲线的T命令比较相似）

语法：S x2 y2, x y 或者 s x2 y2, x y

参数：x、y为终点位置，x2、y2为曲线终止的控制点。

A = Elliptical Arc（用于画弧形，它可以截取圆或椭圆的弧形成的曲线）

语法： A rx ry x-axis-rotation large-arc-flag sweep-flag x y 或者 a rx ry x-axis-rotation large-arc-flag sweep-flag x y

参数：

Z = close path（闭合命令，从当前点画一条直线到路径的起始点）

从以上对path命令的说明我们可以看到其实要我们手写svg代码其实不现实，简单的形状还好，复杂点的形状，手写代码会变得很吃力。所以svg文件一般都是UI设计好直接导出给我们前端。svg的动画也一样，虽然可以配合JavaScript或者css来实现，但是复杂的动画写起来会很费劲，加上大量使用css实现动画性能会跟不上。这里我就直接推荐一些优秀的svg动画库了。

这里比较推荐GreenSock（GSAP）相比之下 GSAP 有以下优点：

下面我们就简单上手一下，开整:

gsap.to有很多属性，如下：

上面的属性只要你是前端看着应该都很熟悉CSS transform ，所以还是比较容易上手的，是吧。

上面例子用到的.to()这样的方法叫补间，类似的还有3个：

gsap.to()：这是最常见的补间类型。 .to()补间将从元素的当前状态开始 “到” 补间中定义的值。

gsap.from()：和 .to() 正好相反，.from()补间中定义的值为动画开始的状态。

gsap.fromTo()：定义了起始值和结束值。

gsap.set()：立即设置属性（无动画）。

gsap.timeline() 是 GSAP 提供的另一个神器，拥有操纵时间轴线的能力，会让动画有序进行，在我们需要控制一组动画的时候非常有用。尤其是复杂动画都会用到timeline。ok，我们接着看例子：

接着上面的例子，把动画的状态控制加上：

最后，我们来实现一个文字动画特效:

GSAP的简单使用介绍就到这里，它的功能远不止这些。还有一些强大的插件，能写出更复杂、更有意思的动画效果。等你去尝试。

GreenSock Animation Platform 提供了一些优秀的助手/调试工具，有助于我们在开发动画时候进行调试。这些工具有一些需要加入 Club GreenSock 才能使用

Ease Visualizer

GSDevTools

GSAP Docs

canvas 和 svg 基础入门就学到这，下一篇我将和你一起入门ECharts，敬请期待~

参考：